<!DOCTYPE html>
<html lang="en" style="font-size: 50px;">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suspension 悬浮框</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .head-nav {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #EEF0F4;
            font-size: 16px;
        }

        body {
            background: #F9F9FB;
        }

		.service {
			position: fixed;
			top: 50%;
			right: 0.2rem;
			width: 1.2rem;
			z-index: 800;
		}
		.service span{
			display: block;
			content: "";
			position: absolute;
			top: 5px;
			right: 6px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: red;
		}
		.service img {
			width: 100%;
		}
    </style>
</head>

<body>
    <div class="head-nav">
        <div onclick="history.go(-1)">《</div>
        <div>Suspension 悬浮框</div>
        <div></div>
    </div>

    <div class="service">
        <img src="https://testshop.jianuohuiyuan.com/addons/index19/img/balabala/09.png" alt="">
    </div>


    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
 		// 客服
        var isDown = false;
  		var nx, ny, vleft, vtop;  //X Y坐标
  		// 移动端拖动1
  		var  wxX,wxY;
        function Suspension(ele){
            $(ele).bind("touchstart", function (e) {
			e.preventDefault();
			  var touch = event.targetTouches[0];
			  wxX= touch.clientX;
			  wxY = touch.clientY;
  		    isDown = true;
  		  $(document).bind("touchmove", function (ev) {
			  e.preventDefault();
  		    if (!isDown) return
  		    var touch = event.targetTouches[0];
  		    ny = touch.clientY;
  		    nx = touch.clientX;
  		    ny -= $(ele).height() / 2
  		    nx -= $(ele).width() / 2
  		    $(ele).css('top', '' + ny / ($(window).height() / 100) + '%')
  		    $(ele).css('left', '' + nx / ($(window).width() / 100) + '%')
  		  })
  		}).bind("touchend", function (e) {
			var touch = event.changedTouches[0];
			  if(wxX ===  touch.clientX && wxY === touch.clientY){
				 wxurl()
			 }else{
  		  	vleft = $(window).width() / 2
				vtop = $(window).height()
  		  	nx < vleft ? $(ele).css('left', '0.2rem') : $(ele).css('left', '82%');
  		  	vtop*0.8 < ny? $(ele).css('top', '80%') : ( ny < vtop*0.1 ? $(ele).css('top', '10%') : null);
			}
  		  isDown = false;
  		})
        }
        Suspension(".service")
    </script>
</body>

</html>